/*
 * ===========================================
 * Element Plus 菜单组件样式
 * ===========================================
 * 基于新设计系统的 Element Plus 菜单组件样式覆盖
 */

/* ===========================================
 * 1. 基础菜单容器
 * =========================================== */

.menu {
	width: 100%;
	display: flex;
	height: 100% !important;
	overflow: visible;
	box-shadow: transparent;
	background: var(--nav-bg);
	justify-content: flex-end;
	border: none;
}

/* ===========================================
 * 2. 菜单项基础样式
 * =========================================== */

.menu-item-common {
	background: transparent !important;
	transition: all var(--transition-base);
	padding: 0 var(--space-3);
	margin: 0 var(--space-2);
	border-radius: var(--radius-md);
	position: relative;

	span {
		display: inline-block;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		color: var(--nav-text);
		transition: color var(--transition-base);
	}

	&:hover {
		background: var(--nav-hover-bg) !important;
		span {
			color: var(--nav-hover-text);
		}
	}

	&:focus {
		outline: none;
		background: var(--nav-hover-bg) !important;
	}
}

/* 子菜单样式 */
.custom-sub-menu {
	:deep(.el-sub-menu__title) {
		@extend .menu-item-common;
		border-width: 0 !important;
		border-bottom: 0 !important;

		&:hover {
			background: var(--nav-hover-bg) !important;
			border-bottom: 2px solid var(--nav-hover-text) !important;
		}
	}
}

/* 菜单项样式 */
.custom-menu-item {
	@extend .menu-item-common;
	height: auto !important;

	&:hover {
		background: var(--nav-hover-bg) !important;
		border-bottom: 2px solid var(--nav-hover-text) !important;
	}
}

/* ===========================================
 * 3. 菜单状态样式
 * =========================================== */

.is-active,
.isHighlight {
	span {
		font-weight: var(--font-weight-bold);
		color: var(--nav-text-active) !important;
	}

	.custom-menu-item-title {
		background: var(--nav-active-bg) !important;
		border-radius: var(--radius-md);
	}

	:deep(.el-sub-menu__title) {
		background: var(--nav-active-bg) !important;
		border-bottom: 2px solid var(--nav-active-border) !important;

		span {
			color: var(--nav-text-active) !important;
		}

		&:hover {
			background: var(--nav-hover-bg) !important;
			border-bottom: 2px solid var(--nav-hover-text) !important;

			span {
				color: var(--nav-hover-text) !important;
			}
		}
	}

	&:hover {
		.custom-menu-item-title {
			background: var(--nav-hover-bg) !important;

			span:first-child {
				color: var(--nav-hover-text) !important;
			}

			span:last-child {
				color: var(--nav-hover-text) !important;
			}
		}

		span {
			color: var(--nav-hover-text) !important;
		}
	}
}

/* Element Plus 激活状态的 hover 覆盖 */
.el-menu--horizontal {
	.el-menu-item.is-active {
		&:hover {
			background: var(--nav-hover-bg) !important;
			color: var(--nav-hover-text) !important;
			border-bottom: 2px solid var(--nav-hover-text) !important;
		}
	}
}

/* ===========================================
 * 4. 特殊菜单项样式
 * =========================================== */

.custom-menu-item-title {
	display: flex;
	flex-direction: column;
	width: 100%;
	padding: var(--space-2) var(--space-3);
	border-radius: var(--radius-md);
	transition: all var(--transition-base);

	span {
		line-height: var(--line-height-tight);
		flex: 1;
		transition: color var(--transition-base);

		&:first-child {
			font-size: var(--font-size-sm);
			font-weight: var(--font-weight-semibold);
			color: var(--nav-text);
		}

		&:last-child {
			font-size: var(--font-size-xs);
			color: var(--nav-text-muted);
			margin-top: var(--space-1);
		}
	}

	&:hover {
		background: var(--nav-hover-bg) !important;

		span:first-child {
			color: var(--nav-hover-text);
		}

		span:last-child {
			color: var(--nav-hover-text);
		}
	}
}

/* ===========================================
 * 5. Element Plus 全局样式覆盖
 * =========================================== */

.el-menu--horizontal {
	background: transparent !important;

	.el-menu-item {
		&:focus {
			background: var(--nav-hover-bg) !important;
		}

		&.is-active {
			background: var(--nav-active-bg) !important;
			color: var(--nav-text-active) !important;
			border-bottom: 2px solid var(--nav-active-border) !important;
		}
	}
}

/* 隐藏子菜单箭头图标 */
.el-sub-menu__icon-arrow {
	display: none !important;
}

/* 弹出菜单样式 */
.el-menu--popup {
	background: var(--card-bg) !important;
	border: 1px solid var(--card-border) !important;
	border-radius: var(--radius-xl);
	padding: var(--space-1) !important;
	margin: 0 !important;
	box-shadow: var(--card-shadow) !important;
	backdrop-filter: var(--card-backdrop);

	.el-menu-item {
		height: auto !important;
		padding: 0 !important;
		margin: var(--space-1) 0 !important;
		border-radius: var(--radius-md);
		color: var(--text-primary) !important;
		transition: all var(--transition-base);

		&:hover {
			background: var(--content-hover-bg) !important;
			color: var(--text-link) !important;
		}

		&:focus {
			background: var(--content-hover-bg) !important;
			outline: none;
		}

		span {
			color: inherit !important;
		}
	}

	li {
		padding: 0 !important;
		margin: 0 !important;
	}
}

/* 弹出层样式 */
.el-popper {
	border: 1px solid var(--card-border) !important;
	border-radius: var(--radius-xl) !important;
	box-shadow: var(--card-shadow) !important;
	backdrop-filter: var(--card-backdrop);

	.el-menu--horizontal {
		border: none !important;
	}
}

/* ===========================================
 * 6. 响应式设计
 * =========================================== */

@media (max-width: var(--breakpoint-md)) {
	.menu {
		justify-content: center;

		.menu-item-common {
			margin: 0 var(--space-1);
			padding: 0 var(--space-2);
		}
	}

	.custom-menu-item-title {
		padding: var(--space-2) var(--space-2);

		span {
			&:first-child {
				font-size: var(--font-size-xs);
			}

			&:last-child {
				font-size: 11px;
			}
		}
	}
}

/* ===========================================
 * 7. 主题切换动画
 * =========================================== */

.menu,
.menu-item-common,
.custom-sub-menu :deep(.el-sub-menu__title),
.custom-menu-item,
.custom-menu-item-title,
.el-menu--horizontal .el-menu-item,
.el-menu--popup .el-menu-item,
.el-popper,
.custom-menu-item-title span,
.menu-item-common span,
.custom-sub-menu :deep(.el-sub-menu__title) span,
.is-active span,
.isHighlight span {
	transition:
		background-color var(--transition-base),
		color var(--transition-base),
		border-color var(--transition-base),
		border-bottom-color var(--transition-base),
		box-shadow var(--transition-base),
		font-weight var(--transition-base) !important;
}
